<template>
    <div class="about">
        <el-row class="about-content">
        	<el-col :span="16" :offset="4">
        		<el-row>
        			<el-col :span="10">
        				<el-row>
        					<el-col>
        						<img src="/img/about-1.png" alt="" width="100">
        					</el-col>
        					<el-col>
        						<p class="about-text">是一个专业的团队<br>是一个充满热血的团队<br>是一个勇于创新的团队</p>
        					</el-col>
        				</el-row>
        				<el-row class="about2">
        					<el-col>
        						<img src="/img/about-2.png" alt="" width="100">
        					</el-col>
        					<el-col>
        						<p class="about-text">提供最专业的服务<br>提供最贴心的服务<br>提供最具性价比的方案</p>
        					</el-col>
        				</el-row>
        			</el-col>
        			<el-col :span="14" class="img-contain">
        				<img v-if="pic" :src="pic.pictureURL" alt="" width="100%">
        			</el-col>
        		</el-row>
        	</el-col>
        </el-row>
    </div>
</template>
<script>
import {getPicture} from '@/api'
export default {
    data: function() {
        return {
        	pic: null
        }
    },
    created: function(){
    	getPicture({params: {pictureType: 'ABOUT_AS_POSTERS', pageSize: 1}}).then(res => {
    		console.log(res)
    		this.pic = res.list[0];
    	})
    }
}

</script>
<style scoped>
.about{
	height: calc(100vh - 80px);
	position: relative;
	transition: all .1s linear;
}
.about-content{
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.about-text{
	width: 100%;
	line-height: 1.8;
}
.about2{
	margin-left: 120px;
}
.img-contain{
	box-shadow: -1px 14px 20px 1px rgba(0,0,0,.5);
    border-radius: 3px;
    font-size: 0;
}
</style>
